<template>
  <div :class="mapModuleIndex===2?'sceneModuleLeft':'sceneModule'">
    <div class="sceneModuleFuncGroup">
      <el-tooltip class="item" effect="dark" content="图层列表" placement="right">
        <div
          :class="{active:moduleSelectedIndex===1}"
          @click="moduleSelectedIndex=1,headerTitle='图层列表'"
        >
          <i class="kfb-icon-kehuxinxiliebiao" />
        </div>
      </el-tooltip>
    </div>
    <div v-show="moduleSelectedIndex!==0" class="sceneModuleMain">
      <div class="layerlist-header">
        <span>{{ headerTitle }}</span>
        <i
          type="text"
          class="sceneModulePanelClose el-icon-close"
          style="float: right;"
          @click="moduleSelectedIndex=0"
        />
      </div>
      <div class="sceneModuleContent">
        <layerTreeScene v-show="true" />
      </div>
    </div>

      
    
  </div>
</template>
<script>


import layerTreeScene from "@/pages/yzt/components/layerTreeScene";

//import sceneDataContrast from '@/pages/Hzz/components/eswyzt/components/sceneDataContrast'
//import sceneAnalysis from '@/pages/Hzz/components/eswyzt/components/sceneAnalysis'
//,sceneDataContrast,sceneAnalysis
export default {
  components: { layerTreeScene },
  props: {
    mapModuleIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      moduleSelectedIndex: 0,
      headerTitle: "图层列表"
    };
  },
  methods: {},
  mounted() {}
};
</script>

<style>
.sceneModule {
  position: absolute;
  z-index: 999;
  height: 100%;
  /* width: 400px; */
  /* background-color: white; */
}

.sceneModuleLeft {
  position: absolute;
  z-index: 999;
  height: 100%;
  left: 50%;
}

/* .mapModuleFuncGroup {
    width: 48px;
    height: 100%;
    background-color: #fff;
  } */

.sceneModuleFuncGroup > div {
  width: 40px;
  height: 40px;
  background: rgba(128, 128, 128, 0.5);
  text-align: center;
  line-height: 40px;
  margin-top: 18px;
  margin-left: 8px;
  /* border-bottom: 1px solid firebrick; */
  text-shadow: 0.2rem 0rem 0.5rem #09b0ac, -0.2rem 0rem 0.5rem #09b0ac,
    0rem 0.2rem 0.5rem #09b0ac, 0rem -0.2rem 0.5rem #09b0ac;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.sceneModuleFuncGroup > div:hover {
  background: #d9e9ff;
  color: #fff;
  text-shadow: 0.2rem 0rem 0.5rem #09b0ac, -0.2rem 0rem 0.5rem #09b0ac,
    0rem 0.2rem 0.5rem #09b0ac, 0rem -0.2rem 0.5rem #09b0ac;
}

.sceneModuleFuncGroup > div > i {
  font-family: "iconfont" !important;
  font-size: 20px;
}

.sceneModule .sceneModuleMain {
  position: absolute;
  left: 55px;
  width: 336px;
  padding: 0px;
  top: 18px;
  background: rgba(0, 0, 0, 0.3);
}

.sceneModule .collapseIcon {
  width: 20px;
  height: 76px;
  position: absolute;
  right: -20px;
  top: 50%;
  margin-top: -38px;
  cursor: pointer;
  background: url(/static/img/oneMap/collapse.png) center no-repeat;
}

.sceneModuleLeft .sceneModuleMain {
  position: absolute;
  left: 55px;
  width: 336px;
  padding: 0px;
  top: 18px;
  background: white;
}

.sceneModuleLeft .collapseIcon {
  width: 20px;
  height: 76px;
  position: absolute;
  right: -20px;
  /* -webkit-transform: rotate(180deg); */
  /* transform: rotate(180deg); */
  top: 50%;
  margin-top: -38px;
  cursor: pointer;
  background: url(/static/img/oneMap/collapse.png) center no-repeat;
}

.sceneModulePanelClose {
  position: absolute;
  right: -19px;
  margin: 10px;
  top: -20px;
  font-size: 16px;
  transition: transform 0.3s;
  background-color: #f44336;
  border-radius: 10px;
  color: #fff;
  padding: 2px;
  z-index: 900;
  cursor: pointer;
}

.sceneModule .layerlist-header {
  color: #fff;
  padding: 6px 15px;
  padding-right: 4px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "microsoft yahei", arial, tahoma, helvetica, sans-serif;
  font-size: 15px;
  font-weight: 800;
  background-color: #398f8699;
  margin-bottom: 5px;
}

.sceneModuleContent {
  padding: 7px;
}

.sceneModuleFuncGroup .active {
  color: #fff;
  text-shadow: 0.2rem 0rem 0.5rem #09b0ac, -0.2rem 0rem 0.5rem #09b0ac,
    0rem 0.2rem 0.5rem #09b0ac, 0rem -0.2rem 0.5rem #09b0ac;
  background: #d9e9ff;
}
</style>
